<template>
  <div class='container'>
    <el-form :model="ruleForm"  :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
       <el-form-item label="学科:" prop="subjectID">
           <el-select v-model="ruleForm.subjectID" placeholder="请选择" style="width: 400px;">
              <el-option v-for="item in getsubject" :key="item.id" :label="item.subjectName" :value="item.id"></el-option>
           </el-select>
       </el-form-item>
       <el-form-item label="目录:" prop="catalogID">
           <questionsCatalogue :subjectID="ruleForm.subjectID" :catalogID.sync="ruleForm.catalogID"/>
       </el-form-item>
       <el-form-item label="企业:" prop="enterpriseID">
           <questionsEnterprise :enterpriseID.sync="ruleForm.enterpriseID"/>
       </el-form-item>
       <el-form-item label="城市:" prop="city">
           <el-select v-model="ruleForm.province" placeholder="请选择" style="width: 198px;" @change="getCity">
              <!-- <el-option label="区域一" value="shanghai"></el-option> -->
              <el-option v-for="(item,index) in setprovincesList" :key="index" :label="item" :value="item"></el-option>
           </el-select>
            <el-select v-model="ruleForm.city" placeholder="请选择" style="width: 198px;" class="box1">
              <!-- <el-option label="区域一" value="shanghai"></el-option> -->
              <el-option v-for="(item,index) in setCityList" :key="index" :label="item" :value="item"></el-option>
           </el-select>
       </el-form-item>
       <el-form-item label="方向:" prop="direction">
           <el-select v-model="ruleForm.direction" placeholder="请选择" style="width: 400px;">
              <!-- <el-option label="区域一" value="shanghai"></el-option> -->
              <el-option v-for="(item,index) in getdirectionList" :key="index" :label="item" :value="item"></el-option>
           </el-select>
       </el-form-item>
       <el-form-item label="题型:" prop="questionType">
            <el-radio-group v-model="ruleForm.questionType">
              <el-radio label="1">单选</el-radio>
              <el-radio label="2">多选</el-radio>
              <el-radio label="3">简答</el-radio>
            </el-radio-group>
       </el-form-item>
       <el-form-item label="难度:" prop="difficulty">
            <el-radio-group v-model="ruleForm.difficulty">
              <el-radio label="1">简单</el-radio>
              <el-radio label="2">一般</el-radio>
              <el-radio label="3">困难</el-radio>
            </el-radio-group>
       </el-form-item>
       <!-- 富文本框 -->
       <el-form-item label="题干:" prop="question">
        <questionsNewQuillA :question.sync="ruleForm.question"/>
       </el-form-item>
       <!-- 多选择框 -->
       <div v-show="ruleForm.questionType === '1' || ruleForm.questionType === '2'">
        <el-form-item label="选项:" style="padding: 9px 12px 0 0;">
           <questionsUpLoad :options.sync="ruleForm.options" v-show="ruleForm.questionType === '1'"/>
           <questionsUpLoadB :options.sync="ruleForm.options" v-show="ruleForm.questionType === '2'"/>
       </el-form-item>
       </div>
       <el-form-item label="解析视频:" prop="videoURL">
         <el-input v-model="ruleForm.videoURL" style="width: 400px;"></el-input>
       </el-form-item>
       <!-- 富文本框 -->
       <el-form-item label="答案解析:" prop="answer">
        <questionsNewQuillB :answer.sync="ruleForm.answer"/>
       </el-form-item>
       <el-form-item label="题目备注:" prop="remarks">
         <el-input type="textarea" v-model="ruleForm.remarks" style="width: 400px;"></el-input>
       </el-form-item>
       <el-form-item label="试题标签:" prop="tags">
          <questionsTags :subjectID="ruleForm.subjectID" :tags.sync="ruleForm.tags"/>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="submitForm">确认提交</el-button>
       </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 封装的富文本编辑器
import questionsNewQuillA from '../components/questionsNewQuillA.vue'
import questionsNewQuillB from '../components/questionsNewQuillB.vue'
// 封装的选项列表
import questionsUpLoad from '../components/questionsUpLoad.vue'
import questionsUpLoadB from '../components/questionsUpLoadB.vue'
// 导入封装的目录列表
import questionsCatalogue from '../components/questionsCatalogue.vue'
// 导入封装的企业列表
import questionsEnterprise from '../components/questionsEnterprise.vue'
// 导入封装的标签列表
import questionsTags from '../components/questionsTags.vue'
// 导入选中县接口
import { provinces, citys } from '../../api/hmmm/citys'
// 导入方向
import { direction } from '../../api/hmmm/constants'
// 导入封装的接口(获取学科列表)
import { list } from '../../api/hmmm/subjects'
// 导入封装的添加基础题库接口
import { add, detail, update } from '../../api/hmmm/questions'
export default {
  components: {
    questionsNewQuillA,
    questionsNewQuillB,
    questionsUpLoad,
    questionsUpLoadB,
    questionsCatalogue,
    questionsEnterprise,
    questionsTags
  },
  data () {
    return {
      // 表单数据
      ruleForm: {
        // 学科
        subjectID: '',
        // 目录
        catalogID: '',
        // 企业
        enterpriseID: '',
        // 城市
        province: '',
        // 城市下面的县
        city: '',
        // 方向
        direction: '',
        // 题型
        questionType: '1',
        // 难度
        difficulty: '1',
        // 选项(对象数组,需要4个属性)
        options: [
          { isRight: false, code: 'A', title: '', img: '' },
          { isRight: false, code: 'B', title: '', img: '' },
          { isRight: false, code: 'C', title: '', img: '' },
          { isRight: false, code: 'D', title: '', img: '' }
        ],
        // 题干
        question: '',
        // 解析视频
        videoURL: '',
        // 答案解析
        answer: '',
        // 题目备注
        remarks: '',
        // 试题标签
        tags: ''
      },
      // 表单校验
      rules: {
        subjectID: [{ required: true, message: '请选择学科', trigger: 'change' }],
        catalogID: [{ required: true, message: '请选择目录', trigger: 'change' }],
        enterpriseID: [{ required: true, message: '请选择企业', trigger: 'change' }],
        province: [{ required: true, message: '请选择地区', trigger: 'change' }],
        city: [{ required: true, message: '请选择地区', trigger: 'change' }],
        direction: [{ required: true, message: '请选择方向', trigger: 'change' }],
        question: [{ required: true, message: '请输入题干', trigger: 'blur' }],
        answer: [{ required: true, message: '请输入题干', trigger: 'blur' }]
      },
      // 获取学科列表数据
      getsubject: [],
      // 获取城市
      setprovincesList: [],
      // 获取城市下面的县
      setCityList: [],
      // 方向
      getdirectionList: []
    }
  },
  created () {
    this.getsubjectList()
    this.getProvinces()
    this.getdirection()
    if (this.$route.query.id) {
      this.getplayback()
    }
  },
  methods: {
    // 学科列表
    async  getsubjectList () {
      const data = await list({
        page: 1,
        pagesize: 100
      })
      this.getsubject = data.data.items
    },
    // 获取城市
    getProvinces () {
      const data = provinces()
      this.setprovincesList = data
    },
    // 获取城市下面县
    getCity (text) {
      const data = citys(text)
      this.setCityList = data
    },
    // 获取方向
    getdirection () {
      const data = direction
      this.getdirectionList = data
    },
    // 点击提交
    submitForm () {
      const flag = this.$route.query.id
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          try {
            if (this.$route.query.id) {
              // 新增

              await update(this.ruleForm)
            } else {
              await add(this.ruleForm)
            }
            this.$message({
              message: `${flag ? '修改成功' : '新增成功'}`,
              type: 'success'
            })
            this.$router.push('/questions/list')
          } catch (error) {
            console.log('添加失败')
          }
        }
      })
    },
    // 数据回显
    async getplayback () {
      const data = await detail({
        id: this.$route.query.id
      })
      this.ruleForm = data.data
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  padding: 20px;
  // background-color: red;
  .container-title {
    padding: 20px;
    background-color: #fff;
    border-bottom: 1px solid #ebeef5;
  }
  .demo-ruleForm {
    padding: 20px;
    background-color: #fff;
  }
  .box {
    display: inline-block;
  }
  // ::v-deep .el-input__inner {
  //   width: 400px;
  // }
  ::v-deep .box1 .el-input--medium  {
     margin-left: 4px;
  }
}
</style>
